import type {Reactive,} from "vue";
import type {SysUserReq} from "#/type/user";
import type {TablePaginationConfig} from "ant-design-vue";
import type {FilterValue, SorterResult} from "ant-design-vue/es/table/interface";
import {h, ref} from "vue";
import {Tag} from "ant-design-vue";

export default function (
    fetchTableData: Function,
    formSearch: Reactive<SysUserReq>,
    tablePagination: Reactive<any>
) {
  const tableColumns = ref<any>([
    {
      title: '序号',
      dataIndex: 'user_id',
      key: 'user_id',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
    }, {
      title: '名称',
      dataIndex: 'user_name',
      key: 'user_name',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
    }, {
      title: '昵称',
      dataIndex: 'nick_name',
      key: 'nick_name',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
    }, {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
    }, {
      title: '手机号码',
      dataIndex: 'phone',
      key: 'phone',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
    }, {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      filters: [
        {text: '男', value: 1},
        {text: '女', value: 2},
      ],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
      customRender: (row: any,) => {
        if (row.value === 2) {
          return h(Tag, { color: 'red' }, () => '女');
        } else if (row.value === 1) {
          return h(Tag, { color: 'green' }, () => '男');
        } else {
          return h(Tag, { color: 'grey' }, () => '未知');
        }
      }
    },{
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
      customRender: (row: any,) => {
        if (row.value === 0) {
          return h(Tag, { color: 'red' }, () => '禁用');
        } else if (row.value === 1) {
          return h(Tag, { color: 'green' }, () => '启用');
        } else {
          return h(Tag, { color: 'grey' }, () => '未知');
        }
      }
    },{
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      sorter: true,
      sortDirections: ['desc', 'asc'],
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
      customCell: () => ({ style: { textAlign: 'center', }, }),
    },{
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      customHeaderCell: () => ({ style: { textAlign: 'center', }, }),
    },
  ]);
    // 表格变化事件函数
    const tableChange = (page: TablePaginationConfig, filters: FilterValue, sorter: SorterResult) => {
        const filterParams = Object.entries(filters).reduce((acc, [key, value]) => {
            if (value && Array.isArray(value) && value.length > 0) {
                acc[key] = value[0];
            }
            return acc;
        }, {} as Record<string, any>);
        // 将过滤参数合并到请求参数中
        if (sorter.field && sorter.order) {
            tablePagination.sorter = sorter.field + ' ' + sorter.order
        }
        tablePagination.current = page.current as number
        tablePagination.pageSize = page.pageSize as number
        let params: SysUserReq = {...formSearch, ...tablePagination, ...filterParams,}
        fetchTableData(params)
    }
    const tableRecordDelete = (record:any)=>{
      console.log( record,typeof record)
    }
    return {tableColumns,tableChange,tableRecordDelete}
}
